import React, {useState, useEffect} from 'react'
import {Result, Button, notification} from 'antd'
import hasBedge from './lib/hasBedge'
import bedge from './bedge.jpeg'
import useBedge from './hooks/useBedge.js'
import reset from './lib/reset'

export default ({history}) => {
  const canvasRef = useBedge(bedge)
  const [flag, setFlag] = useState(false)
  useEffect(() => {
    hasBedge().then(f => setFlag(f))
      .catch(err => console.log(err))
  })
  if(!flag) {
    return (
      <Result status="warning"
              title="尚无资格获得勋章。"
              extra={
                <Button type="primary" key="backtoentry"
                        onClick={() => history.push('/')}>
                  回到首页
                </Button>
              }/>
    )
  }
  const onClick = () => {
    reset().then(() => notification.success({
      message: '重置成功！',
      duration: 3,
      placement: 'bottomRight'
    }))
  }
  return (
    <div style={{
      display: 'flex', justifyContent: 'center',
      flexFlow: 'column',
      alignItems: 'center', minHeight: '100vh',
    }}>
      <div style={{textAlign: 'center'}}>
        <canvas width="300px" height="300px" ref={canvasRef}>
        </canvas>
      </div>
      <div style={{marginTop: 10, width: '300px'}}>
        <Button block onClick={onClick}>重来一次</Button>
      </div>
    </div>
  )
}
